<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>新增账号</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/formSelects-v4.css"/>
</head>
<body style="padding: 10px;background: white;min-height: 90%">
<div id="divvuehtml" style="width: 90%;height: 100%;margin: auto;">
    <form class="layui-form" id="add">
        <input type="hidden" name="tx" v-model="tx"/>
        <table class="layui-table" lay-size="sm">
            <thead>
            <tr>
                <th colspan="4" style="text-align: center;">新增学生</th>
            </tr>
            </thead>
            <tbody style="text-align: center;">
            <tr>
                <td>头像上传</td>
                <td style="text-align: left">
                    <div class="layui-upload-drag" id="uploadadvert">
                        <i class="layui-icon layui-icon-upload-drag"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>学生名称</td>
                <td colspan="3">
                    <input type="text" name="name" required lay-verify="required" lay-verType="tips"  lay-reqText="学生名称不能为空" placeholder="请输入学生名称"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>学号</td>
                <td colspan="3">
                    <input type="text" name="account" required lay-verify="required" lay-reqText="学号不能为空"  placeholder="请输入学号"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>登录密码</td>
                <td colspan="3">
                    <input type="text" name="pwd" required lay-verify="required|password" lay-reqText="登录密码不能为空"  placeholder="请输入登录密码"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td colspan="3">
                    <select name="sex"  required lay-verify="required" lay-filter="sex">
                        <option value=""></option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td colspan="3">
                    <input type="number" name="age" required lay-verify="required" lay-reqText="年龄不能为空"  placeholder="请输入年龄"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td colspan="3">
                    <input type="text" name="phone" required lay-verify="required" lay-reqText="联系电话不能为空"  placeholder="请输入联系电话"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td colspan="3">
                    <select name="status"  required lay-verify="required" lay-filter="status">
                        <option value=""></option>
                        <option value="1">正常</option>
                        <option value="0">封禁</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>用户角色</td>
                <td colspan="3">
                    <select name="roleids"  required lay-verify="required" lay-filter="roleids">
                        <option value="2">大学生</option>
                    </select>
                </td>
            </tr>
            <tr >
                <td colspan="4">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">新增</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/xadmin.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<script th:inline="none">
    setTimeout(function(){
        layui.config({
            base: '/js/' //此处路径请自行处理, 可以使用绝对路径
        }).extend({formSelects: 'formSelects-v4'}).use(['table','form','layer','formSelects','upload'],function() {
            var form = layui.form;
            var layer = layui.layer;
            var formSelects = layui.formSelects;
            var upload = layui.upload;
            //拖拽上传
            upload.render({
                elem: '#uploadadvert'
                ,accept: 'images'
                ,field:"files"
                ,url: '/api/upload/uploads' //改成您自己的上传接口
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传成功');
                    ve.tx=res.data;
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "/api/upload/getImage?filePath="+res.data);
                    //console.log(res)
                },error: function(index, upload){
                    layer.closeAll('loading'); //关闭loading
                }
            });
            form.verify({
                password: function(value, item){ //value：表单的值、item：表单的DOM对象
                    var letterRegex = /[a-zA-Z]/;
                    var numberRegex = /[0-9]/;
                    if (!letterRegex.test(value) || !numberRegex.test(value)) {
                        return "密码必须包含字母和数字组合！";
                    }
                }
            });
            //监听提交
            form.on('submit(formDemo)', function(data){
                var index;
                $.ajax({
                    url : "/sys/user/saveUser",
                    type : "POST",
                    data : data.field,
                    dataType : "json",
                    beforeSend : function(XMLHttpRequest) {
                        index = layer.msg('正在提交数据中，请稍候', {
                            icon : 16,
                            time : false,
                            shade : 0.8
                        });
                    },success : function(data) {
                        if(data.success){
                            // 刷新父页面
                            layer.alert(data.msg, {
                                icon : 6
                            }, function() {
                                xadmin.close();
                                // 刷新父页面
                                parent.location.reload();
                            });
                        }else{
                            xadmin.alert(data.msg,2)
                        }
                    },complete : function(XMLHttpRequest, textStatus) {
                        layer.close(index);
                    },error : function(data) {
                        layer.alert('网络异常或者数据错误', {
                            icon : 2
                        });
                    }
                });
                return false;
            });
        });
    }, 300);

    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            menuItems:[],//初始化角色对象
            tx:""
        },created: function () {//vue在打开html也没初始化创建函数
            this.ininRole();//初始化角色数据
        },mounted: function () {//初始化html完成后在进行操作

        },methods: {//调用函数
            ininRole :function (){
                $.get("/sys/role/list",{page:1,rows:1000},function(data){
                    if(data.success){
                        ve.menuItems = data.data.records;
                    }else{
                        layui.use(['layer'], function(){
                            var layer = layui.layer;
                            xadmin.alert("初始化数据错误");
                        })
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })

</script>
</html>
